<template>
  <div class="ticketList-box">
    <div :class="$route.query.linkType == 'del' ? 'ticketList-top-one':'ticketList-top-btn'">
      <el-button v-if="$route.query.linkType == 'del'" @click="back" icon="el-icon-arrow-left">返回</el-button>
      <!-- v-if="$store.state.fieldList&&$store.state.fieldList.tempList&&$store.state.fieldList.tempList.length==0" 免费不需要控制 -->
      <el-button @click="addForm()" style="width:136px" icon="el-icon-plus">报名表单创建</el-button>
    </div>
    <el-table empty-text="赶快创建报名表单吧~" v-loading="loadingTable" element-loading-text="拼命加载中" :data="$store.state.fieldList.tempList" border style="width: 100%">
      <el-table-column prop="tableName" align="center" label="表单名称">
      </el-table-column>
      <el-table-column align="center" label="内容">
        <template slot-scope="scope">
          <p style="  text-align: left;">
            <el-tag style="margin: 6px 0px 0px 6px;" type="info" v-for="(item, index) in initFieldName(scope.row.vnote1)" :key="index" size="small">{{item}}</el-tag>
          </p>
        </template>
      </el-table-column>
      <el-table-column width="160" align="center" label="更新时间">
        <template slot-scope="scope">
          <p>{{$moment(scope.row.updateTime,'YYYY-MM-DD HH:mm')}}</p>
        </template>
      </el-table-column>
      <el-table-column width="100" align="center" label="状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status==0">使用中</el-tag>
          <el-tag v-if="scope.row.status==1">未使用</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="136" fixed="right" align="center" label="操作">
        <template slot-scope="scope">
          <el-button @click="openFormMain(scope.row.tableName,scope.row.vnote1,scope.row.id)" type="text" style="color:#67c23a">编辑</el-button>
          <el-button v-if="scope.row.status==1" @click="delForm(scope.row.id)" type="text" style="color:#f56c6c">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div v-if="$store.state.fieldList.amount" class="el-pagination-box">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="$pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="$store.state.fieldList.amount">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import GetDataFun from "./../js/GetDataFun.js"; //得到一些数据的方法
export default {
  data() {
    return {
      currentPage: 1, //当前页数
      pageSize: 10, //每页多少条
      loadingTable: false //表格
    };
  },
  created() {
    this.handleCurrentChange(this.currentPage);
  },
  methods: {
    back() {
      this.$router.push({
        path: "/ticketRelease",
        query: {
          type: "goBack"
        }
      });
    },
    //初始化内容
    initFieldName(componenList) {
      let data = JSON.parse(componenList);
      let showData = [];
      for (let i = 0; i < data.length; i++) {
        showData.push(data[i].attribute.titName);
      }
      return showData;
    },
    async handleSizeChange(val) {
      this.pageSize = val;
      this.loadingTable = true;
      await GetDataFun.getFieldList(this.currentPage, this.pageSize).then(
        res => {},
        err => {}
      );
      this.loadingTable = false;
    },
    async handleCurrentChange(val) {
      this.currentPage = val;
      this.loadingTable = true;
      await GetDataFun.getFieldList(this.currentPage, this.pageSize).then(
        res => {},
        err => {}
      );
      this.loadingTable = false;
    },
    // 打开表单页面
    openFormMain(name, componenList, id) {
      this.$router.push({
        name: "formMain",
        params: {
          formName: name,
          componenList: componenList || "",
          id: id || ""
        }
      });
    },
    // 表单删除
    delForm(id) {
      this.$confirm("您确定是否要进行删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let subData = {
            activityId: this.$store.state.activityId,
            id: id
          };
          this.$http.post("/api/isv/temp/delTemp", subData).then(
            res => {
              if (res.data.success) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.handleCurrentChange(this.currentPage);
              } else {
                this.$message({
                  message: res.data.errorMsg || "删除失败",
                  type: "warning"
                });
              }
            },
            err => {
              this.$message.error("服务器出小差了");
            }
          );
        })
        .catch(() => {});
    },
    //创建表单
    addForm() {
      this.$prompt("请输入报名表单名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^\s|\S$/,
        inputErrorMessage: "内容不能为空"
      })
        .then(({ value }) => {
          if (!value) {
            this.$message({
              message: "请输入报名表单名称",
              type: "warning"
            });
            return;
          }
          this.openFormMain(value);
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped>
.ticketList-box {
  width: 100%;
  min-height: 200px;
  background: #fff;
  border-radius: 6px;
  padding: 16px 26px;
}
.ticketList-top-btn {
  width: 100%;
  height: auto;
  margin: 10px 0px 20px 0px;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: center;
  align-items: center;
}
.ticketList-top-one {
  width: 100%;
  height: auto;
  margin: 10px 0px 20px 0px;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
.cellPLeft {
  text-align: left;
  width: 100%;
}
.table_content .el-table th {
  background-color: #f9f9f9 !important;
}
</style>
